<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令-条件渲染-v-if</title>

</head>
<body>
<div id="app">

    <!--
       不推荐if-else的嵌套
        封装
    -->
    <!--
      template是个逻辑区块
      把内部内容看成一个整体
      但并不会添加真实的html元素
    -->
    <template v-if="isShow">
        <div >
            你看见我了
        </div>
        <div >
            你看见我了2
        </div>
    </template>


    <div v-show="isShow">
         show
    </div>

    <template v-show="isShow">
        <div >
            你看见我了 show
        </div>
        <div >
            你看见我了2 show
        </div>
    </template>

    <div v-else>
         这是else分支
    </div>
    <div>
        <!--v-on:的语法糖  @[事件名称]-->
        <button @click="btnShowClick">显示</button>
        <button @click="btnHideClick">隐藏</button>
        <button @click="btnToggleClick">切换</button>
    </div>

</div>
</body>
<script src="../../lib/vue.global.js"></script>

<script>


    /**
     *   原生js版本
     * */
        // var btnToggle= document.getElementById('btnToggle');
        // var isShow=true;
        //
        // btnToggle.onclick =function (){
        //    var box =document.getElementById('box');
        //    if(isShow){
        //       box.style.display = 'none';
        //       isShow = false;
        //    }else {
        //      box.style.display = 'block';
        //      isShow = true;
        //    }
        // }


    var app = Vue.createApp({
            data: function () {
                return {
                    isShow: true
                }
            }, methods: {

                btnShowClick: function () {
                    this.isShow = true;
                },

                btnHideClick: function () {
                    this.isShow = false;
                },
                btnToggleClick: function () {

                    this.isShow=!this.isShow;
                }
            }
        });
    app.mount('#app');

</script>
</html>